<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">会员中心</div>
    </v-ons-toolbar>
    <div class="container">
      <!-- 头部 -->
      <div class="head">
        <img src="https://wx.qlogo.cn/mmopen/vi_32/tNAmMmIN8MMMplWGCBbdq28D2Y44n7tvnWJl6FWMuVE2Z42pyapOSyQbsM4uSITZ5C3kvnypA2ibgzzZoL4QoMw/132" alt="">
        <p>会员等级：普通用户</p>
        <p><span> 成长值：0 </span> <span> 积分：0 </span></p>
      </div>

      <!-- 我的会员模块  -->
      <div class='sub-title-panel'>
        <div class='title'>
          <div class='color-block'></div> 我的会员
        </div>
        <div class='content'>
          <div class='level-module'>
            <div class='level-mark'>
              <div class='mark'>
                <img src='../../assets/resource/consumer/member_center/mark.png' class='icon' />
                <p class='user-integral'>500</p>
              </div>
            </div>
            <v-ons-progress-bar value="0" secondary-value="100" class="level-prog"></v-ons-progress-bar>
            <div class='level-group'>
              <!--<block wx:for="{{levelArr}}" wx:for-item="levelItem" wx:key="">-->
              <div class='level-item' v-for="levelItem in levelArr">
                <img :src='levelItem.defaultImg' class='icon' />
              </div>
              <!--</block>-->
            </div>
          </div>
        </div>
      </div>


      <!-- 成长值模块  -->
      <div class='sub-title-panel'>
        <div class='title'>
          <div class='color-block'></div> 成长值
        </div>
        <div class='content'>
          <div class='nav-group'>
            <div class='nav-item' @click="enterPage({path:'/ConsumerMemberPurchase'})">
              <img class='nav-item-img' src='../../assets/resource/consumer/member_center/nav-icon1.png'/>
              <div class='nav-item-title'>会员购买</div>
            </div>
            <div class='nav-item' @click="enterPage({path:'/ConsumerMemberDescription'})">
              <img class='nav-item-img' src='../../assets/resource/consumer/member_center/nav-icon2.png'/>
              <div class='nav-item-title'>会员权益</div>
            </div>
            <div class='nav-item' @click="enterPage({path:'/ConsumerSignIn'})">
              <img class='nav-item-img' src='../../assets/resource/consumer/member_center/nav-icon3.png' />
              <div class='nav-item-title'>会员签到</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 提示信息模块  -->
      <div class='sub-title-panel'>
        <div class='title'>
          <div class='color-block'></div> 成长问答
        </div>
        <div class='content'>
          <div class='tip-group'>
            <div class='tip-item'>
              <div class='tip-title'>
                1.如何快速增加成长值？
              </div>
              <div class='tip-content'>
                通过每日签到可快速获得成长值，签到次数决定了成长值的分数。
              </div>
            </div>
            <div class='tip-item'>
              <div class='tip-title'>
                2.怎么快速增加会员积分？
              </div>
              <div class='tip-content'>
                会员可在平台下单，下单完成后的金额决定了积分的大小，在您下次交易时，可使用积分抵现金。
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>

  </v-ons-page>
</template>

<script>
    export default {
      data() {
        return {
          actionSheetVisible: false,
          levelArr:[
            {
              "defaultImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level1.png",
              "activeImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level1_1.png",
              "needScore": 0
            },
            {
              "defaultImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level2.png",
              "activeImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level2_1.png",
              "needScore": 1000
            },
            {
              "defaultImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level3.png",
              "activeImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level3_1.png",
              "needScore": 2000
            },
            {
              "defaultImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level4.png",
              "activeImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level4_1.png",
              "needScore": 3000
            },
            {
              "defaultImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level5.png",
              "activeImg": "https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/member-center/level5_1.png",
              "needScore": 4000
            }
          ]
        }
      },
      methods: {
        enterPage({path:path,actionSheet:actionSheet}){
          if(actionSheet){
            this.actionSheetVisible = false
          }
          this.$router.push({
            path:path
          });
        }
      }
    }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/member-center.less";
</style>
